<!-- 英文 复习 -->
<template>
	<view class="display">
		<view class="hd">
			<uv-text :text="cont.name" color="#fff" size="30px" align="center" margin="10px 0 100px"></uv-text>
		</view>
		<view id="bd_view" class="bd uv-flex-row hidden-scrollbar">
			<template v-for="(item,index) in typing.content" :key="index">
				<view class="item" :class="'item-'+index">
					<text :class="[
					{'space':item == ' '},
					{'cursor':typing.current == index},
					{'error': showErrorClass(index)},
					itemClassName(index)
				]">{{item}}</text>
				</view>
			</template>
		</view>
	</view>
	<view class="progress">
		<progress-line :percentage="progress" @end="courseComplete(completePopup)" />
	</view>
	<popup-complete ref="completePopup" />
</template>
<script setup>
	import { defineComponent, ref } from 'vue';
	import progressLine from './progress-line.vue';
	import useTyping from '../hooks/useTypingBASE.js';
	import popupComplete from './popup-complete.vue';
	defineComponent({ progressLine, popupComplete })
	const completePopup = ref(null);
	const props = defineProps({
		cont: {
			type: Object,
			default () {
				return {}
			}
		}
	})
	const { typing, progress, showErrorClass, itemClassName, courseComplete } = useTyping(() => {
		return props.cont;
	})
</script>
<style scoped lang="scss">
	@import '../common/style.scss';
	.bd {
		height: 100px;
		overflow-x: hidden;
		overflow-y: auto;
		max-width: 1080px;
		margin: 0 auto;
		flex-wrap: wrap;
		justify-content: center;
		.item {
			padding: 10px;
			text {
				display: block;
				width: 80px;
				height: 80px;
				line-height: 80px;
				border-radius: 10px;
				border: 2px solid #fff;
				text-align: center;
				font-size: 30px;
				color: #fff;
				&.warn {
					background-color: #ffe9b2;
					color: #0e630e;
				}
				&.success {
					background-color: #e7fbd3;
					color: #0e630e;
				}
				&.error {
					background-color: pink;
					color: #8b0000
				}
			}
		}
	}
</style>